import { Component, Prop } from 'vue-property-decorator'
import { IHeaderProps } from '@/types/header'
import { VC } from '@/VC-vue'
import './index.styl'
import { AppModule } from '@/store/modules/app.ts'

@Component({})
export default class EHeader extends VC<IHeaderProps> {
    get headerStyle() {
        const { options } = this
        const headerStyle = options.hideShadow
            ? 'ethan-header bt-1px'
            : 'shadow ethan-header bt-1px'
        return headerStyle
    }

    get title() {
        return AppModule.appOptions.title
    }

    get showBack() {
        return AppModule.appOptions.showBack
    }
    get options() {
        return AppModule.appOptions
    }

    private goBack() {
        this.$router.go(-1)
    }

    private renderBack() {
        return (
            <div class="header-left" onclick={this.goBack}>
                <md-icon name="arrow-left" size="lg" color="#4d96f3" />
                <span>返回</span>
            </div>
        )
    }

    private renderMenu() {
        return (
            <div class="header-right">
                <md-icon name="edit" size="lg" color="#4d96f3" />
            </div>
        )
    }

    private render() {
        return (
            <div class={this.headerStyle}>
                {this.showBack && this.renderBack()}
                <div class="header-title">{this.title}</div>
                {this.options.showMenu && this.renderMenu()}
            </div>
        )
    }
}
